<template>
  <div class="body">
    <div class="header"></div>
    <img
      class="imgefix"
      @click="showPopup"
      src="../../assets/img/you/dex.png"
    />
    <!-- 浮窗 -->
    <img
      src="../../assets/img/you/headPost.png"
      class="imageUrl"
      @click="btnImgUrl"
    />
    <!-- 规则弹窗 -->
    <van-popup v-model="Fixed" class="boxed">
      <img
        @click="onClose"
        src="../../assets/img/you/stop.png"
        class="stop"
        alt=""
      />
      <div class="backgrend">
        <!-- <div class="gui">抽奖规则</div> -->
        <div>
          <p>一、活动规则：</p>
          <p>
            1、凡是在2021年8月20日-9月10日期间购买媛福达苏打气泡水的会员，购买数量不限，1瓶即可参与抽奖活动，每张会员卡仅限参与一次，重复购买无效;
          </p>
          <p>
            2、根据会员的购买记录,向会员卡绑定的手机号发送一条抽奖提醒短信并附含抽奖链接，点击链接进行抽奖(抽奖时间:2021年9月20日-9月26日);
          </p>
          <p>
            3、中奖消费者可在媛福达APP商城中搜索相应商品名称，使用商品优惠券进行全额抵扣购买，或从APP商城“我的-我的卡券”中点击奖励优惠券使用来全额抵扣购买，购买后奖品将由媛福达APP商城包邮到家(如有疑问请咨询媛福达APP客服)。
          </p>
          <p>
            4、本次活动所有中奖券均为电子券，会员中奖后将发放到其媛福达APP商城账户中，兑奖日期为2021年9月20日-9月30日，逾期视为自动放弃。
          </p>
        </div>
      </div>
      <img
        @click="onClose"
        class="images"
        src="../../assets/img/you/mi.png"
        alt=""
      />
    </van-popup>
    <!-- 抽奖转盘 -->
    <div id="bg">
      <!-- 指针 -->
      <img
        @click="lotteryBut"
        id="wekupButton"
        src="../../assets/img/you/choujianganniu@2x.png"
        alt="pointer"
        :class="inAnimation ? 'pointer' : ''"
        @animationend="inAnimation = false"
      />
      <!-- 转盘 -->
      <div class="turntable" ref="turntable">
        <div class="Boxed"></div>
      </div>
      <div class="text">您还有{{ goTimes }}次抽奖机会</div>
    </div>
    <div class="contexts">
      <!-- 中奖信息 -->
      <div class="record_header">中奖名单</div>
      <!-- 懒加载Loading -->
      <div class="boxScroll-show" v-if="!record.winningIs">
        <van-loading size="1.8rem" vertical class="pop-loading">
          加载中...
        </van-loading>
      </div>
      <!-- 中奖名单列表 -->
      <vue-seamless-scroll
        :data="Windraw"
        class="boxScroll"
        v-if="record.winningIs"
        :class-option="defaultOption"
      >
        <ul class="slide-container">
          <li class="slide-item" v-for="item in Windraw" :key="item.id">
            <div class="Text-hot">
              恭喜{{ item.phone }}获得
              <span>{{ item.prizeName }}</span>
            </div>
            <div class="time">{{ item.winTime }}</div>
            <!-- <div class="time">{{ (item.winTime * 1000) | dateFormat }}</div> -->
          </li>
        </ul>
      </vue-seamless-scroll>

      <!-- 中奖弹窗 -->
      <van-popup v-model="win" class="Box-win">
        <img
          @click="btnClose"
          src="../../assets/img/you/stop.png"
          class="stop"
        />
        <div class="backgrend">
          <!-- 动态参数 -->
          <div class="gui">
            <!-- {{ id == 0 ? "很遗憾" : "恭喜您" }} -->
            恭喜您
          </div>
          <p class="text-Hot">
            <!-- {{ id == 0 ? "好可惜！差一点就中奖了" : "获得" + prizes.name }} -->
            获得{{ prizes.name }}
          </p>
          <!-- <img class="Timg" :src="id == 0 ? node : prizes.img" /> -->
          <img class="Timg" :src="prizes.img" />
          <div class="btn-Hot">
            <!-- {{ id == 0 ? " 大奖还有明天再来" : "奖品已放置“我的-我的卡券”" }} -->
            奖品已放置“我的-我的卡券
          </div>
          <div class="Go-Hot" v-show="Gohot" @click="balance">点击查看</div>
        </div>
        <img
          @click="Gowin"
          class="images"
          src="../../assets/img/you/goback.png"
        />
      </van-popup>
    </div>
    <!-- 微信遮罩 -->
    <div @touchmove.prevent class="rigth" v-if="showWx">
      <img src="../../assets/img/wei_20210307160153.png" />
    </div>
    <div class="banner" v-if="closeUp">
      <img
        src="../../assets/img/share/x.png"
        class="imgone"
        @click="btnCloseUp"
      />
      <img src="../../assets/img/share/yuan.png" class="imgtwo" />
      <span class="spanone">
        打开媛福达APP
        <span class="spantwo">购物方便优惠多</span>
      </span>
      <div class="btn" @click="Gone">下载</div>
      <div id="upBut" class="upDown">打开</div>
      <!-- <div class="upDown" @click="downUp" v-if="!showIos">打开</div> -->
    </div>
  </div>
</template>

<script>
import bridge from "../../js/js1";
import { winDeras, numberDraws, lottery } from "@/api/index";
import { share } from "../../js/public";
import { getSystem, openApp, getUrlQuery, parseKeyValue } from "../../js/js";
import { Dialog } from "vant";
import store from "@/store";
import vueSeamlessScroll from "vue-seamless-scroll"; // 无缝滚动
// import Vconsole from "vconsole";
// const vConsole = new Vconsole();

export default {
  name: "Draw",
  data() {
    return {
      system: getSystem(),
      share: true,
      isGo: false, //是否正在执行动画
      oTurntable: "", //执行动画的对象
      randomDeg: 0, //即将旋转的度数
      lastDeg: 0, //上一次旋转的度数
      goTimes: 0, //抽奖次数
      id: "6", // 奖品id
      prizes: "",
      win: false, // 中奖弹窗
      Fixed: false, // 弹窗规则
      Gohot: true, // 未中奖不显示 ‘点击查看’
      Windraw: [], //中奖记录
      record: {
        //记录列表loading判断
        winningIs: true,
        lotteryIs: true,
      },
      //动画
      inAnimation: true,
      pageNum: 1, //当前页
      pageSize: 30, //每页默认条数
      total: "", //总页码
      maxL: "",
      intNum: "",
      showWx: false,
      closeUp: true,
      showIos: false,
    };
  },
  components: {
    vueSeamlessScroll,
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    this.system = getSystem();
    // 调用获取次数接口 获取剩余 分享次数 和 游戏次数
    if (!this.system.yfd && !this.system.wechat) {
      if (this.system.iOS9 || this.system.android) {
        ULink([
          {
            id: "usr1anivh5aa8uq6", // 后台生成的裂变活动LinkID
            data: {
              path: "webview",
              webUrl: "https://download.yuanfuda933.com/h5/other2.html#/draw",
              // webUrl: "http://h.yuanfudagroup.com/h5/#/draw", // 活动地址
              andUrl: "https://download.yuanfuda933.com/h5/other2.html#/draw", // 活动地址
              // extraData: `{id:${this.id},uid:${this.uid}`,
              // extraData: {
              //   id: this.id,
              //   uid: this.uid,
              //   tid: this.tid
              // }
            } /* 自定义参数，选填 */,
            selector: "#upBut",
            useOpenInBrowerTips: "default",
            proxyOpenDownload: function (defaultAction, LinkInstance) {
              window.location.href = LinkInstance.solution.downloadUrl;
            },
          },
        ]);
      }
    } else {
      this.getToken((token) => {
        this.$store.commit("setUser", token);
      });
    }
  },
  mounted() {
    this.toph();
    this.Token();
    this.oTurntable = this.$refs.turntable;
    share({
      title: "欢乐大抽奖！",
      desc: "华为P50 Pro、九阳电烤箱、美的空气炸锅、吸尘器、电饼铛、料理机，众多厨房小家电等您带回家。",
      imgUrl: "https://download.yuanfuda933.com/h5/images/youe.png",
      // shareUrl: "https://download.yuanfuda933.com/h5/other2.html#/drawh",
      shareUrl: "https://download.yuanfuda933.com/h5/other2.html#/drawh",
    });
    if (this.system.iOS) {
      this.showIos = false;
    } else if (this.system.android) {
      this.showIos = true;
    }
  },
  methods: {
    toph() {
      if (this.system.wechat) {
        this.showWx = true;
        return false;
      } else {
        this.showWx = false;
      }
    },
    btnCloseUp() {
      this.closeUp = false;
    },
    Gone() {
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
      } else if (this.system.android) {
        window.location.href =
          "https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk";
      }
    },
    downUp() {
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
        return;
      }
    },
    Token() {
      this.getToken((token) => {
        this.$store.commit("getUser", token);
      });
      let that = this;
      setTimeout(function () {
        that.numberDrawsGet();
        that.GetWin();
      }, 500);
    },
    getToken(callback) {
      // console.log(callback);
      const system = getSystem();
      if (system.android) {
        bridge.dsCall("getToken", "", (res) => {
          if (typeof res === "string") res = JSON.parse(res);
          callback(res);
        });
        return;
      }
      if (system.iOS) {
        bridge.iosReg("myTokenmethd", (res) => {
          const token = parseKeyValue(res);
          // const token = qs.parse(res)
          callback(token);
        });
        bridge.iosCall("getToken", "", (res) => {});
      }
    },
    // 点击去查看余额
    balance() {
      window.location.href = "yfd://yfdmall:8080/couponList";
    },
    // 弹出规则弹窗
    showPopup() {
      this.Fixed = true;
    },
    //关闭抽奖规则弹窗
    onClose() {
      if (this.Fixed == true || this.win == true) this.Fixed = false;
      this.win = false;
    },
    // 跳转主会场
    Gowin() {
      window.location.href =
        "https://download.yuanfuda933.com/h5/other2.html#/anniversarye";
      this.win = false;
    },
    // 跳转方法
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout((t) => {
        document.body.removeChild(a);
      }, 0);
    },
    // 获取抽奖次数
    numberDrawsGet() {
      const tokened = this.$store.state.gettoken.token;
      this.record.winningIs = false;
      console.log(tokened);
      if (tokened) {
        const { gettoken } = store.state;
        const version = gettoken.version,
          token = gettoken.token,
          did = gettoken.did,
          typePed = gettoken.type,
          sign = gettoken.sign,
          time = gettoken.time,
          model = gettoken.model;

        numberDraws(version, token, did, typePed, sign, time, model)
          .then((res) => {
            if (res.data.code == 200) {
              this.goTimes = res.data.data;
            } else {
              console.log("error，抽奖次数接口出差");
            }
          })
          .catch((err) => {
            console.log("接口出错");
            console.log(err);
          });
      } else {
        this.$toast("请先登录！");
        return false;
      }
    },
    //转盘指针事件
    lotteryBut() {
      if (this.system.wechat) {
        this.showWx = true;
        return false;
      } else {
        this.showWx = false;
      }
      if (!this.system.iOS9 && !this.system.android) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
        return false;
      }
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
      } else if (this.system.android) {
        this.$toast("请先登录APP");
      }
      // 判断是否登录，未的登录跳登录
      const system = getSystem();
      // const tokened = this.$store.state.gettoken.token;
      // if (tokened) {
      //   if (!this.isGo && this.goTimes > 0) {
      //     // 获取中奖id参数
      //     this.getNumber();
      //   } else if (!this.isGo && this.goTimes <= 0) {
      //     this.$dialog
      //       .alert({
      //         message: "您的抽奖机会用完了",
      //         theme: "round-button",
      //       })
      //       .then(() => {
      //         // on close
      //       });
      //   } else return this.$toast("正在抽奖！"); //表明正在抽奖，未结束扔点击无效
      // } else {
      //   // this.$toast("请先登录APP！");
      //   if (system.android) {
      //     console.log("and 登录");
      //     bridge.dsCall("h5Login", "", (e) => {
      //       callback(e);
      //     });
      //   }
      //   if (system.iOS) {
      //     console.log("ios 登录");
      //     bridge.iosCall("h5Login", "", (e) => {
      //       callback(e);
      //     });
      //   }
      // }
    },

    getRandom(n, m) {
      //该方法能产生[n,m]之间随机数
      let result = Math.floor(Math.floor(Math.random() * (m - n + 1) + n));
      return result;
    },
    //调用抽奖接口
    getNumber() {
      /*  
        调整中奖概率(让每次旋转前指针都在初始位置，这样才准确)
        想转到第一项，需要转：360/7*0 + 360/7/2;   --->该项为超级大奖奖项
        想转到第二项，需要转：360/7*1 + 360/7/2;
        想转到第三项，需要转：360/7*2 + 360/7/2;
        想转到第四项，需要转：360/7*3 + 360/7/2;
        想转到第五项，需要转：360/7*4 + 360/7/2;
        想转到第六项，需要转：360/7*5 + 360/7/2;
        想转到第七项，需要转：360/7*6 + 360/7/2;   --->该项为未中奖项
      */
      // let number = this.getRandom(0, 100)
      // 后端返回0-6之间随机数  let caseNum = res
      const tokened = this.$store.state.gettoken.token;
      // console.log(tokened);
      if (tokened) {
        const id = 63;
        const { gettoken } = store.state;
        const version = gettoken.version,
          token = gettoken.token,
          did = gettoken.did,
          typePed = gettoken.type,
          sign = gettoken.sign,
          time = gettoken.time,
          model = gettoken.model;
        lottery(id, version, token, did, typePed, sign, time, model)
          .then((res) => {
            console.log("抽奖信息DWI+++++", res.data.data.level, res);
            if (res.data.code == 200) {
              //关闭动画
              this.inAnimation = false;
              // 传递中奖参数
              this.prizes = res.data.data;
              if (res.data.data == null) {
                if (this.goTimes <= 0) {
                  this.$toast("您的抽奖机会用完了");
                  return;
                } else {
                  // 传递id
                  this.id = res.data.data.level;
                  var number = this.id;
                  let caseNum = "";
                  if (number == 1) {
                    caseNum = 1; //粗略概率为1%
                  } else if (number == 2) {
                    caseNum = 2; //粗略概率为5%
                  } else if (number == 3) {
                    caseNum = 3; //粗略概率为5%
                  } else if (number == 4) {
                    caseNum = 4; //粗略概率为5%
                  } else if (number == 5) {
                    caseNum = 5; //粗略概率为5%
                  } else if (number == 6) {
                    caseNum = 6; //粗略概率为5%
                  } else {
                    caseNum = 7; //粗略概率为75%
                  }
                  switch (caseNum) {
                    case 1:
                      this.ratating(
                        (360 / 7) * 0 + 360 / 7 / 2,
                        "HUAWEI P50 Pro 4G全网通 原色双影像单元 麒麟9000芯片 万象双环设计 8GB+512GB雪域白手机",
                        caseNum
                      );
                      break;
                    case 4:
                      this.ratating(
                        (360 / 7) * 1 + 360 / 7 / 2,
                        "OEM美的吸尘器兑换券",
                        caseNum
                      );
                      break;
                    case 6:
                      this.ratating(
                        (360 / 7) * 2 + 360 / 7 / 2,
                        "小熊料理机C04L5",
                        caseNum
                      );
                      break;
                    case 7:
                      this.ratating(
                        (360 / 7) * 3 + 360 / 7 / 2,
                        "19减5优惠券",
                        caseNum
                      );
                      break;
                    case 3:
                      this.ratating(
                        (360 / 7) * 4 + 360 / 7 / 2,
                        "OEM美的空气炸锅",
                        caseNum
                      );
                      break;
                    case 2:
                      this.ratating(
                        (360 / 7) * 5 + 360 / 7 / 2,
                        "OEM九阳电烤箱兑换券",
                        caseNum
                      );
                      break;
                    default:
                      this.ratating(
                        (360 / 7) * 6 + 360 / 7 / 2,
                        "OEM海尔电饼铛兑换券",
                        caseNum
                      );
                      break;
                  }
                }
              } else {
                // 传递id
                this.id = res.data.data.level;
                var number = this.id;
                let caseNum = "";
                if (number == 1) {
                  caseNum = 1; //粗略概率为1%
                } else if (number == 2) {
                  caseNum = 2; //粗略概率为5%
                } else if (number == 3) {
                  caseNum = 3; //粗略概率为5%
                } else if (number == 4) {
                  caseNum = 4; //粗略概率为5%
                } else if (number == 5) {
                  caseNum = 5; //粗略概率为5%
                } else if (number == 6) {
                  caseNum = 6; //粗略概率为5%
                } else {
                  caseNum = 7; //粗略概率为75%
                }
                switch (caseNum) {
                  case 1:
                    this.ratating(
                      (360 / 7) * 0 + 360 / 7 / 2,
                      "HUAWEI P50 Pro 4G全网通 原色双影像单元 麒麟9000芯片 万象双环设计 8GB+512GB雪域白手机",
                      caseNum
                    );
                    break;
                  case 4:
                    this.ratating(
                      (360 / 7) * 1 + 360 / 7 / 2,
                      "OEM美的吸尘器兑换券",
                      caseNum
                    );
                    break;
                  case 6:
                    this.ratating(
                      (360 / 7) * 2 + 360 / 7 / 2,
                      "小熊料理机C04L5",
                      caseNum
                    );
                    break;
                  case 7:
                    this.ratating(
                      (360 / 7) * 3 + 360 / 7 / 2,
                      "19减5优惠券",
                      caseNum
                    );
                    break;
                  case 3:
                    this.ratating(
                      (360 / 7) * 4 + 360 / 7 / 2,
                      "OEM美的空气炸锅",
                      caseNum
                    );
                    break;
                  case 2:
                    this.ratating(
                      (360 / 7) * 5 + 360 / 7 / 2,
                      "OEM九阳电烤箱兑换券",
                      caseNum
                    );
                    break;
                  default:
                    this.ratating(
                      (360 / 7) * 6 + 360 / 7 / 2,
                      "OEM海尔电饼铛兑换券",
                      caseNum
                    );
                    break;
                }
              }
            }
          })
          .catch((err) => {
            console.log("接口出错");
            console.log(err);
          });
      } else {
        this.$toast("请先登录！");
        return false;
      }
    },
    ratating(deg, text, id) {
      this.goTimes--;
      this.isGo = true;
      let times = this.getRandom(3, 6); //圈数(从用户体验角度考虑，设计随机转3-6圈。最少3圈，最多6圈)
      this.randomDeg = deg + 360 * times; //记录这次要旋转的度数(传来的度数+圈数)
      let realDeg = 360 - (this.lastDeg % 360) + this.lastDeg + this.randomDeg;
      /*上次指针离初始状态的度数 + 上次的度数 + 这次要旋转的度数
      (这样的目的是为了每次旋转都从原点开始，保证数据准确)*/
      this.oTurntable.style.transform = `rotate(${realDeg}deg)`; // 旋转
      setTimeout(() => {
        // 在此调用获取接口
        this.win = true; // 弹出中奖信息框
        this.isGo = false; // 结束中奖状态动画
        console.log(id);
        // this.$toast(`您的中奖结果为${text}`);
        console.log(`以原点为基准共旋转了${this.randomDeg}度,
        			以一圈为基准相对旋转了${this.randomDeg % 360}度,最终结果为${text}`);
        this.lastDeg = realDeg; //把这次度数存储起来，方便下一次获取
      }, 4000); //4000ms为css里面写的执行动画的时间
    },
    // 获取中奖名单
    GetWin() {
      const tokened = this.$store.state.gettoken.token;
      this.record.winningIs = false;
      // console.log(tokened);
      // if (tokened) {
      const type = "1";
      const { gettoken } = store.state;
      const version = gettoken.version,
        token = gettoken.token,
        did = gettoken.did,
        typePed = gettoken.type,
        sign = gettoken.sign,
        time = gettoken.time,
        model = gettoken.model;
      winDeras(type, version, token, did, typePed, sign, time, model)
        .then((res) => {
          if (res.data.code == 200) {
            this.Windraw = res.data.data;
            this.record.winningIs = true;
          } else {
            console.log("error，获取中奖记录——接口请求失败！");
            this.record.winningIs = true;
            Dialog.alert({
              message: "页面加载失败！",
              theme: "round-button",
            }).then(() => {
              // on close
            });
          }
        })
        .catch((err) => {
          console.log("接口出错");
          console.log(err);
        });
      // } else {
      //   this.$toast("请先登录！");
      //   return false;
      // }
    },

    //中奖名单滚动动画

    // 关闭中奖弹窗
    btnClose() {
      if (this.Fixed == true || this.win == true) this.Fixed = false;
      this.win = false;
      //关闭弹窗之后刷新中奖数据
      this.GetWin();
      //关闭弹窗动画继续
      this.inAnimation = true;
      //关闭弹窗之后转盘回到起点
    },
    //顶部跳转按钮
    btnImgUrl() {
      window.location.href =
        "https://download.yuanfuda933.com/h5/other2.html#/anniversarye";
    },
  },
};
</script>

<style scoped lang="less">
.rigth {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 10rem;
  height: 30rem;
  background-color: #1e1e1e;
  opacity: 0.8;
}
.rigth img {
  width: 8rem;
  height: 4.4rem;
  float: right;
}
.banner {
  position: fixed;
  top: 0%;
  width: 10rem;
  height: 2.28rem;
  background: #000000;
  display: flex;
  z-index: 11;
  .imgone {
    display: block;
    margin: auto 0.293333rem;
    width: 0.586667rem;
    height: 0.586667rem;
  }
  .imgtwo {
    display: block;
    margin: auto 0.266667rem;
    width: 1.28rem;
    height: 1.28rem;
  }
  .spanone {
    margin: auto 0.266667rem;
    width: 3rem;
    height: 1.453333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    .spantwo {
      font-size: 0.32rem;
      font-size: #9b9b9b;
      color: #9b9b9b;
    }
  }
  .btn {
    width: 1.55rem;
    height: 0.906667rem;
    background: #ea0462;
    border-radius: 0.133333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.906667rem;
    margin: auto 0;
  }
  .upDown {
    width: 1.55rem;
    height: 0.906667rem;
    background: #ea0462;
    border-radius: 0.133333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.906667rem;
    margin: auto 0;
    margin-left: 0.2rem;
  }
}
.contexts {
  width: 100%;
  height: 13rem;
  padding-top: 2.68rem;
  background: url("../../assets/img/you/bottomLis.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .record_header {
    width: 9.21rem;
    height: 1.2rem;
    line-height: 1.2rem;
    margin: 0 auto;
    border-radius: 0.27rem;
    background-color: #ff6353;
    font-size: 0.39rem;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
  }
}
.body {
  overflow: hidden;
  width: 100%;
  font-family: Arial, Helvetica;
  .header {
    width: 100%;
    height: 15.8rem;
    background: url("../../assets/img/you/headerTop.png") no-repeat;
    background-size: 100%;
  }
  // 固定规则
  .imgefix {
    position: fixed;
    width: 1.466667rem;
    height: 0.986667rem;
    right: 0%;
    top: 2.51rem;
    z-index: 11;
  }
  .imageUrl {
    position: fixed;
    width: 2.2rem;
    height: 2.29rem;
    right: 2.5%;
    top: 83%;
    z-index: 11;
  }
  // 弹出层
  .boxed {
    width: 8.046667rem;
    height: 13.093333rem;
    // background: transparent;
    box-sizing: border-box;
    background: url("../../assets/img/you/guiz.png") no-repeat;
    background-size: contain;
    border-radius: 0.266667rem;
    overflow: hidden;
    padding-top: 3rem;
    padding-left: 0.26rem;
    padding-right: 0.26rem;
    .stop {
      width: 1.066667rem;
      height: 1.066667rem;
      position: absolute;
      top: 18%;
      right: 0%;
    }
    .backgrend {
      margin: 0 auto;
      box-sizing: border-box;
      border-radius: 0.266667rem;
      text-indent: 1em;
      width: 7.046667rem;
      height: 8.093333rem;
      font-size: 0.48rem;
      color: #362c2c;
      overflow: auto;
      .gui {
        position: fixed;
        top: 19%;
        left: 2%;
        width: 2.666667rem;
        font-size: 0.533333rem;
        color: #ffffff;
        font-weight: 600;
        margin: 0.2rem 2.333333rem 0.2rem;
      }
    }
    .images {
      display: block;
      position: absolute;
      bottom: 0%;
      left: 23%;
      width: 4.213333rem;
      height: 1.04rem;
    }
  }
  // 中奖弹窗
  .Box-win {
    width: 8.046667rem;
    height: 13.093333rem;
    // background: transparent;
    box-sizing: border-box;
    background: url("../../assets/img/you/pic.png") no-repeat;
    background-size: contain;
    border-radius: 0.266667rem;
    overflow: hidden;
    padding-top: 3rem;
    padding-left: 0.26rem;
    padding-right: 0.26rem;
    .stop {
      width: 1.066667rem;
      height: 1.066667rem;
      position: absolute;
      top: 18%;
      right: 0%;
    }
    .backgrend {
      margin: 0 auto;
      box-sizing: border-box;
      width: 7.046667rem;
      height: 8.093333rem;
      overflow: auto;
      .gui {
        position: fixed;
        top: 10%;
        left: 4%;
        text-align: center;
        width: 2.666667rem;
        font-size: 0.533333rem;
        color: #ffffff;
        font-weight: 600;
        margin: 0.2rem 2.333333rem 0.2rem;
      }
      .text-Hot {
        font-weight: 600;
        width: 7.046667rem;
        height: 0.566667rem;
        text-align: center;
        line-height: 0.566667rem;
        font-size: 0.426667rem;
        color: #de5f3b;
      }
      .Timg {
        margin-top: 0.4rem;
        margin-left: 1.6rem;
        width: 4rem;
        height: 4rem;
      }
      .btn-Hot {
        width: 6.106667rem;
        margin: 0.133333rem auto 0;
        font-size: 0.373333rem;
        color: #595959;
        text-align: center;
      }
      .Go-Hot {
        text-decoration: underline;
        width: 6.106667rem;
        margin: 0.133333rem auto 0;
        font-size: 0.373333rem;
        color: #e76732;
        text-align: center;
      }
    }
    .images {
      display: block;
      position: absolute;
      bottom: 0%;
      left: 7%;
      width: 6.933333rem;
      height: 1.84rem;
    }
  }
  // tab栏
  @-webkit-keyframes scrollText1 {
    0% {
      -webkit-transform: translateY(0px);
    }
    20% {
      -webkit-transform: translateY(-40px);
    }
    40% {
      -webkit-transform: translateY(-70px);
    }
    60% {
      -webkit-transform: translateY(-100px);
    }
    80% {
      -webkit-transform: translateY(-130px);
    }
    100% {
      -webkit-transform: translateY(-160px);
    }
  }
  @keyframes scrollText1 {
    0% {
      -webkit-transform: translateY(0px);
    }
    20% {
      -webkit-transform: translateY(-40px);
    }
    40% {
      -webkit-transform: translateY(-70px);
    }
    60% {
      -webkit-transform: translateY(-100px);
    }
    80% {
      -webkit-transform: translateY(-130px);
    }
    100% {
      -webkit-transform: translateY(-160px);
    }
  }
  // tab栏内容
  .boxScroll,
  .boxScroll-show {
    width: 9.466667rem;
    height: 8.35rem;
    border-radius: 0.166667rem;
    margin: 0.266667rem auto;
    background: #ffffff;
    overflow: hidden;
    position: relative;
    .slide-container {
      width: 100%;
      // position: absolute;
      // top: 0;
      // left: 0;
      // top: 0px;
      // -webkit-animation: scrollText1 8s infinite cubic-bezier(1, 0, 0.5, 0);
      // animation: scrollText1 8s infinite cubic-bezier(1, 0, 0.5, 0);
      // li:hover {
      //   animation-play-state: paused;
      //   -webkit-animation-play-state: paused;
      // }
      .slide-item {
        width: 100%;
        display: flex;
        position: relative;
        width: 9.066667rem;
        height: 1.73rem;
        border-bottom: 0.026667rem solid #f5f5f5;
        .Text-hot {
          width: 6.2rem;
          margin-top: 0.693333rem;
          margin-left: 0.373333rem;
          font-size: 0.373333rem;
          color: #000000;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          span {
            color: #b33e32;
          }
        }
        .time {
          position: absolute;
          right: 2%;
          top: 41%;
          font-size: 0.32rem;
          color: #ababab;
        }
      }
    }
  }
  .Boxe {
    width: 9.466667rem;
    height: 8rem;
    border-radius: 0.166667rem;
    margin: 0.266667rem auto;
    background: #ffffff;
    overflow: hidden;
    // display: flex;
    // overflow-y: scroll;
    // overflow-x: hidden;
    ul {
      top: 0px;
      -webkit-animation: scrollText1 8s infinite cubic-bezier(1, 0, 0.5, 0);
      animation: scrollText1 8s infinite cubic-bezier(1, 0, 0.5, 0);
      li:hover {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
      }
      li {
        float: left;
        position: relative;
        margin-left: 0.16rem;
        width: 9.066667rem;
        height: 1.73rem;
        border-bottom: 0.026667rem solid #f5f5f5;
        .requed {
          width: 2.666667rem;
          font-size: 0.373333rem;
          color: #000000;
          margin-left: 0.4rem;
          margin-top: 0.4rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .time {
          font-size: 0.32rem;
          color: #ababab;
          margin-left: 0.4rem;
        }
        .Ling {
          position: absolute;
          right: 6%;
          top: 37%;
          font-size: 0.32rem;
          color: #b33e32;
        }
      }
    }
  }

  // 转盘
  #bg {
    position: absolute;
    top: 5.4rem;
    left: 0.21rem;
    width: 9.6rem;
    height: 12.2rem;
    margin: 0 auto;
    background: url("../../assets/img/you/yuanpan.png") no-repeat;
    background-size: 100%;
  }
  #wekupButton {
    width: 3.31rem;
    height: 3.31rem;
    position: absolute;
    z-index: 10;
    top: 26%;
    left: 32.5%;
  }
  .pointer {
    animation: pulse 1s 1000ms linear infinite;
  }
  .turntable {
    width: 7.1rem;
    height: 7.1rem;
    position: absolute;
    z-index: 5;
    top: 1.28rem;
    left: 1.251rem;
    transition: all 4s; /*动画执行时间为4s */
    background: url("../../assets/img/you/createp.png") no-repeat;
    background-size: 100%;
    .Boxed {
      width: 7.1rem;
      height: 7.1rem;
      position: relative;
      background: url("../../assets/img/you/cricePts.png") no-repeat;
      background-size: 100%;
    }
  }
  .text {
    position: absolute;
    left: 17%;
    bottom: 0.1rem;
    width: 6.013333rem;
    height: 1.173333rem;
    font-size: 0.48rem;
    text-align: center;
    line-height: 1.173333rem;
    color: #ffffff;
    border-radius: 0.666667rem;
    background: url("../../assets/img/you/bannerBtn.png") no-repeat;
    background-size: 100% 100%;
  }
}
.pop-loading {
  padding-top: 2.4rem;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
</style>
